import React, { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { SortOption, SORT_OPTIONS } from '../../../hooks/useImageCollection';
import { getDynamicFonts } from '@/utils/fontUtils';

interface CollectionHeaderProps {
    sortBy: SortOption;
    onSortChange: (sortBy: SortOption) => void;
}

/**
 * 图片收藏页面头部组件
 */
const CollectionHeader: React.FC<CollectionHeaderProps> = ({ sortBy, onSortChange }) => {
    const { t, i18n } = useTranslation();
    const dynamicFonts = getDynamicFonts(i18n);
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const dropdownRef = useRef<HTMLDivElement>(null);

    // 点击外部关闭下拉框 
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
                setIsDropdownOpen(false);
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);

    /**
     * 获取当前选中的排序选项标签
     */
    const getCurrentSortLabel = () => {
        const option = SORT_OPTIONS.find(opt => opt.key === sortBy);
        return option ? t(option.labelKey) : t('imageCollection.sortBy');
    };

    /**
     * 处理排序选项点击
     */
    const handleSortOptionClick = (option: SortOption) => {
        onSortChange(option);
        setIsDropdownOpen(false);
    };

    return (
        <div
            className="flex items-center justify-between 
                       px-4 sm:px-6 md:px-8 py-2 
                       bg-[rgb(19,19,19)] border-b border-[rgb(51,51,57)]"
        >
            {/* 左侧标题 */}
            <h1 className="text-lg sm:text-xl md:text-2xl font-semibold text-white cursor-pointer hover:text-pink-400 transition-colors duration-200 truncate"
                style={{ fontFamily: dynamicFonts.font4 }}>
                {t('imageCollection.title')}
            </h1>

            {/* 右侧排序下拉框 */}
            <div className="relative" ref={dropdownRef}>
                <button
                    onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                    className="flex text-[0.9rem] items-center gap-2 
                               px-4 py-2 text-white-300 border border-[rgb(19,19,19)] 
                               rounded-lg"
                >
                    <span style={{ fontFamily: dynamicFonts.font3, color: "white" }}>{getCurrentSortLabel()}</span>
                    <i className={`fas fa-chevron-${isDropdownOpen ? 'up' : 'down'} text-sm`} />
                </button>

                {/* 下拉菜单 */}
                {isDropdownOpen && (
                    <div className="absolute right-0 top-full mt-1 w-40
                     bg-[rgb(29,29,30)] rounded-lg shadow-lg z-10">
                        {SORT_OPTIONS.map((option, index) => (
                            <div key={option.key} style={{ fontFamily: dynamicFonts.font3, color: "white", borderBottom: index === SORT_OPTIONS.length - 1 ? "none" : "1px solid rgb(51,51,57)" }}>
                                <button
                                    onClick={() => handleSortOptionClick(option.key)}
                                    className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-800 transition-colors"
                                >
                                    {/* 选中状态的粉红色勾选图标 */}
                                    <div className="w-4 h-4 flex items-center justify-center">
                                        {sortBy === option.key && (
                                            <i className="fas fa-check text-pink-500 text-sm" />
                                        )}
                                    </div>
                                    <span className="text-[0.9rem]">{t(option.labelKey)}</span>
                                </button>

                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};

export default CollectionHeader; 